<template>
  <div :class="$style.gbmodal">
    <div :class="$style.btnBox" @click="backFn">
      <img :class="$style.btnIcon" src="/fanhuibai.png" alt="" />
      <div :class="$style.btnText">返回</div>
    </div>
    <lay-form ref="formRef" :model="formData" :rules="formRules">
      <lay-form-item label="银行卡名称" label-position="top" prop="cardName" required>
        <lay-input v-model="formData.cardName" placeholder="银行卡名称" :allow-clear="true">
        </lay-input>
      </lay-form-item>
      <lay-form-item label="收款人账户" label-position="top" prop="collectAccount" required>
        <lay-input v-model="formData.collectAccount" placeholder="收款人账户" :allow-clear="true">
        </lay-input>
      </lay-form-item>
      <lay-form-item label="收款人姓名" label-position="top" prop="collectName" required>
        <lay-input v-model="formData.collectName" placeholder="收款人姓名" :allow-clear="true">
        </lay-input>
      </lay-form-item>
      <lay-form-item label="银行地址" label-position="top" prop="bankAddress" required>
        <lay-input v-model="formData.bankAddress" placeholder="银行地址" :allow-clear="true">
        </lay-input>
      </lay-form-item>
      <lay-form-item label="银行国际程式码" label-position="top" prop="bankCode" required>
        <lay-input v-model="formData.bankCode" placeholder="银行国际程式码" :allow-clear="true">
        </lay-input>
      </lay-form-item>
      <lay-form-item>
        <lay-button type="primary" @click="submitForm">保存</lay-button>
      </lay-form-item>
    </lay-form>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "GbModal",
  data() {
    return {
      formData: {
        cardName: '',
        collectAccount: '',
        collectName: '',
        bankAddress: '',
        bankCode: '',
      },
      formRules: {
        cardName: [
          { required: true, message: '请输入银行卡名称', trigger: 'blur' },
        ],
        collectAccount: [
          { required: true, message: '请输入收款人账户', trigger: 'blur' },
        ],
        collectName: [
          { required: true, message: '请输入收款人姓名', trigger: 'blur' },
        ],
        bankAddress: [
          { required: true, message: '请输入银行地址', trigger: 'blur' },
        ],
        bankCode: [
          { required: true, message: '请输入银行国际程式码', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      let that = this;
      that.$refs.formRef.validate(valid => {
        if (valid) {
          // let para = {
          //   nickName: that.formData.nickName,
          //   avatar: that.formData.avatar,
          // }
          // let loadIndex = that.$layer.load();
          // that.$axios.post('', para).then((res) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg(res.data.message, { time: 1000 });
          //   if (res.data.code != 200) {
          //     return;
          //   }
          // }).catch((err) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg('保存失败,请重试', { time: 1000 });
          // });
        } else {
          return false;
        }
      });
    },
    backFn(){
      this.$emit('backCard',0);
    },
  },
});
</script>
<style module>
.gbmodal {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px 20px;
  overflow-y: auto;
}

.btnBox {
  width: 80px;
  height: 32px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #13CE66;
  cursor: pointer;
  margin-bottom: 20px;
}

.btnIcon {
  width: 16px;
  height: 16px;
}

.btnText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: normal;
  color: #FFFFFF;
  margin-left: 5px;
}
</style>
<style scoped>
.layui-btn {
  width: 200px;
  height: 32px;
  line-height: 32px;
}
</style>